<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
        }
    </style>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //行内样式 display
            //隐藏 display:none  显示 display：原始值 如果没有原始值则删除display样式
            //动画路线 左上角<->右下角
            //显示
          $(".show").click(function(){
            //   $("div").show();
             //   $("div").show("slow"); normal fast
              $("div").show(1000);
           
          })
          //隐藏
          $(".hide").click(function(){
              $("div").hide();
          })
          //切换
          $(".toggle").click(function(){
              $("div").toggle();
          })

          //行内样式 height 
          //动画路线 上<->下
          $(".slideDown").click(function(){
              $("div").slideDown(3000);
          })
          //
          $(".slideUp").click(function(){
              $("div").slideUp();
          })
          //
          $(".slideToggle").click(function(){
              //$("div").slideToggle();
              $("div").stop().slideToggle(3000);删除所有排队的动画，在最后一次动画基础上，继续新动画
              $("div").finish().slideToggle(3000);删除所有排队的动画，完成所有动画 ，开始新动画
          })


           // 行内样式 opacity 透明度 0<->1
          $(".fadeIn").click(function(){
              $("div").fadeIn();
          })
          $(".fadeOut").click(function(){
              $("div").fadeOut(3000);
          })
          $(".fadeTo").click(function(){
              $("div").fadeTo("normal",0.3);
          })
          $(".fadeToggle").click(function(){
             $("div").fadeToggle();
              

          })
// 
          $(".animate").click(function(){
              //$("div").animate({width:"400px"},1000);
             // $("div").animate({width:"400px",height:"400px",opacity:0.3},1000);
              $("div").animate({width:"+=40px",height:"+=40px",opacity:0.3},1000);
              
          })

        })
    </script>
</head>
<body>
    <button class="show">show</button>
    <button class="hide">hide</button>
    <button class="toggle">toggle</button>
    <br>
    <button class="slideDown">slideDown</button>
    <button class="slideUp">slideUp</button>
    <button class="slideToggle">slideToggle</button>
    <br>
    <button class="fadeIn">fadeIn</button>
    <button class="fadeOut">fadeOut</button>
    <button class="fadeTo">fadeTo</button>
    <button class="fadeToggle">fadeToggle</button>
    <br>
    <button class="animate">animate</button>
    <div></div>
</body>
</html>